﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" content="chrome=1, IE=edge" http-equiv="X-UA-Compatible" />
  
    <title>WWT Web Client Arrived</title>
    <script src="http://www.worldwidetelescope.org/webclient/sdk/wwtsdk.js"></script>
    <script>

    // Create the WorldWide telescope object variable
    var wwt;

    // Create variables to hold the changeable settings
	var bShowCrosshairs = true;
	var bShowUI = true;
	var bShowFigures = true;
	var bShowCircles = false;

	// This function initializes the wwt object and registers the wwtReady event
	// once the initialization is done the wwtReady event will be fired
	function initialize() {
	    wwt = wwtlib.WWTControl.initControl("WWTCanvas");
	    wwt.add_ready(wwtReady);
	    wwt.add_arrived(wwtArrived);
	}

    // A simple function to toggle the settings
    // This function is called from the checkbox entries setup in the html table
	function toggleSetting(text) {
	    switch (text) {
	        case 'ShowUI':
	            bShowUI = !bShowUI;
	            wwt.hideUI(!bShowUI);
	            break;

	        case 'ShowCrosshairs':
	            bShowCrosshairs = !bShowCrosshairs;
	            wwt.settings.set_showCrosshairs(bShowCrosshairs);
	            break;

	        case 'ShowFigures':
	            bShowFigures = !bShowFigures;
	            wwt.settings.set_showConstellationFigures(bShowFigures);
	            break;

	        case 'ShowCircles':
	            bShowCircles = !bShowCircles;
	            if (!bShowCircles) {
	                clearAnnotations();
	            }
	            break;
	            
	    }
	}

    // A function to change the view to different constellations
    // This function is called from the button entries in the html table
	function GotoConstellation(text) {    
	    
	    switch (text) {
	        case 'Sagittarius':
	            wwt.gotoRaDecZoom(286.485, -27.5231666666667, 60, false);
	            break;

	        case 'Aquarius':
	            wwt.gotoRaDecZoom(334.345, -9.21083333333333, 60, false);
	            break;

	        case 'Camelopardalis':
	            wwt.gotoRaDecZoom(90.0, 72.000, 100, false);
	            break;

	        case 'Vulpecula':
	            wwt.gotoRaDecZoom(303.47, 24.4426666666667, 100, false);
	            break; 
	    }
	}
	
	// A function to create a circle, and return a reference to the circle
	var circleCount = 0;
	function createWWTCircle(fill, lineColor, fillColor, lineWidth, opacity, radius, skyRelative, ra, dec) {
	    var circle = wwt.createCircle(fill);
	    circleCount++;
        circle.set_id("Circle" + circleCount.toString());
	    circle.set_lineColor(lineColor);
	    circle.set_fillColor(fillColor);
	    circle.set_lineWidth(lineWidth);
	    circle.set_opacity(opacity);
	    circle.set_radius(radius);
	    circle.set_skyRelative(skyRelative);
	    circle.setCenter(ra, dec);
	    return circle;
	}

	// Simple function to clear all the annotations from the view

	function clearAnnotations() {
	    wwt.clearAnnotations();
	}

	// wwtArrived (similar to wwtReady) is a reserved name by the WWT Web Control
	// This function is called when a Goto action comes to a halt

	function wwtArrived(obj, eventArgs) {
	    if (bShowCircles) {
	        // Show that we have arrived by drawing a red circle at the new ra, dec

	        var circle = createWWTCircle(false, "red", "blue", 3, 1.0, 15, false, eventArgs.get_RA(), eventArgs.get_dec());
	        wwt.addAnnotation(circle);

	    }
	}

	// The wwtReady function is called by the WWT Web Control software
	// This function sets up the wwt object, and the initial defaults

	function wwtReady() {

	    wwt.settings.set_showCrosshairs(bShowCrosshairs);
	    wwt.settings.set_showConstellationFigures(bShowFigures);
	    wwt.hideUI(!bShowUI);

	    wwt.settings.set_showConstellationBoundries(true);

	}

</script>

</head>

<body onload="initialize()" >

<!-- The body section creates a table with two columns. The first contains the -->
<!-- canvas object that the WWT web client uses as the render target. And the second a table within-->
<!-- the table, containing some buttons and checkboxes.-->

<table border="2" bgcolor="lightgrey">
	<tr><td>
        <div id="WorldWideTelescopeControlHost">
            <div id="WWTCanvas" style="width: 750px; height: 750px; border-style: none; border-width: 0px;">
            </div>
    </div>
	</td><td>

	<table border="2" cellspacing="4" cellpadding="4" bgcolor="gold">
	
	<tr>
	<th colspan="2"><h2>WWT Web Client Arrived</h2></th>
	</tr>
			
	<tr>
	<th colspan = "2"> 
	<input type="button" id="Sagittarius" value="Goto Sagittarius" onclick="GotoConstellation('Sagittarius')"/>
	<input type="button" id="Aquarius" value="Goto Aquarius" onclick="GotoConstellation('Aquarius')"/></th>		
	</tr>
	<tr>
	<th colspan = "2"> 
	<input type="button" id="Camelopardalis" value="Goto Camelopardalis" onclick="GotoConstellation('Camelopardalis')"/>
	<input type="button" id="Vulpecula" value="Goto Vulpecula" onclick="GotoConstellation('Vulpecula')"/></th>		
	</tr>
	<tr>
	<th colspan = "2">Settings</th>
	</tr>
	
<!--	<tr>
		<td> Show UI </td>
		<td> <input id="UI" type="checkbox" checked="checked" onclick="toggleSetting('ShowUI');"/></td>

	</tr>-->
	
	<tr>
		<td> Show Crosshairs</td>
		<td> <input id="Crosshairs" type="checkbox" checked="checked" onclick="toggleSetting('ShowCrosshairs');"/></td>

	</tr>

	<tr>
		<td> Show Figures </td>
		<td> <input id="Figures" type="checkbox" checked="checked" onclick="toggleSetting('ShowFigures');"/></td>

	</tr>
	<tr>
	<th colspan = "2">On Arrival</th>
	</tr>
	<tr>
		<td> Show circles </td>
		<td> <input id="Checkbox1" type="checkbox" onclick="toggleSetting('ShowCircles');"/></td>

	</tr>
		<tr>
		<td> Clear all the current circles</td>
		<td> <input id="clear" type="button" value="Clear" onclick="clearAnnotations();"/></td>
		
	</tr>
</table>
</td>
</tr>
</table>

</body>
</html>
